<template>
  <div>
    <div v-for="i in viproomList" :key="i.goodsId">
      <div class="content" @click="goGoodsDetail(i.goodsId)">
        <p><img :src="i.coverImg|imgPathFilter" alt="" width="125" height="80"></p>
        <ul>
          <li>{{i.goodsName}}</li>
          <li><img src="../../assets/address.png" alt="" width="15"><span v-if="i.securityType==1">安检内</span><span
            v-if="i.securityType==2">安检外</span><span v-if="i.securityType==3">航班不同前往不同休息室</span></li>
          <li><img src="../../assets/clock.png" alt="" width="15">营业时间： {{i.roomTime}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getViproomListAirport} from '../../../test/unit/http'

  export default {
    name: 'airportguibinting',
    props: {},
    data() {
      return {
        viproomList: [],
      };
    },
    methods: {
      getData(params) {
        getViproomListAirport(params).then(res => {
          if (res.code == 100) {
            this.viproomList = res.object
          }
        })
      },
      goGoodsDetail(goodsId) {
        this.$router.push({path: '/guibindetail', query: {entrySource: "home", goodsId: goodsId}})
      }
    },
    created() {
      let airportId = this.$route.query.airportId;
      this.getData({airportId: airportId})
    },
    beforeRouteLeave(to, form, next) {
      let activeIndex = form.query.activeIndex;
      to.query.activeIndex=activeIndex;
      next()
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .content {
    display: flex;
    text-align: left;
    padding: 13px 0 10px;
    margin: 0 10px;
    border-bottom: 1px solid #eee;

    p {
      flex: 0 125px;
      margin-right: 10px;

      img {
        border-radius: 7px;
      }
    }

    ul {
      li {
        font-size: 12px;
        color: #999;
      }

      li:nth-child(2) {
        margin: 7px 0;
      }

      li:first-child {
        font-size: 15px;
        color: #111;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

  }
</style>
